

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>商品管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css"
	media="all">
<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
<style>
.newform {
	margin-bottom: 15px;
}
</style>
</head>

<body>
	<div class="layui-fluid">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form newform">
					<div class="layui-input-items">
						<div class="layui-input-inline">
							<input type="text" name="pid" placeholder="请输入商品ID"
								class="layui-input">
						</div>
						<div class="layui-input-inline">
							<input type="text" name="title" placeholder="请输入商品名字"
								class="layui-input">
						</div>
						<div class="layui-input-inline">
							<select class="layui-input" name="onSale">
								<option value="">请选择一个状态</option>
								<option value="1">已上架</option>
								<option value="0">未上架</option>
							</select>
						</div>
						<div class="layui-input-inline">
							<button class="layui-btn layuiadmin-btn-comm" lay-submit
								lay-filter="LAY-app-contcomm-search">
								<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
							</button>
						</div>
					</div>
				</form>
				<table id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
				<script type="text/html" id="操作列模板">
          <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" data-type="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
			</div>
		</div>
	</div>

	<script src="/layuiadmin/layui/layui.js"></script>
	<script type="text/html" id="newOnSale">
  		<input type="checkbox" name="onSale" value="{{d.pid}}" {{d.onSale?"checked":""}} lay-skin="switch" lay-text="上架|下架"  lay-filter="onSale" >
	</script>
	<script>
		layui.use([ 'table'], function() {
			var table = layui.table, form = layui.form;
			var $ = layui.$;
			// 渲染表格数据
			table.render({
				elem : '#LAY-app-content-list',
				toolbar : 'default',
				url : '/product/list',
				page : true,
				checkbox : true,
				cols : [ [ {
					checkbox : true
				}, {
					field : 'pid',
					title : '商品ID'
				}, {
					field : 'cid',
					title : '类别Id'
				}, {
					field : 'title',
					title : '商品名称'
				}, {
					field : 'sellPoint',
					title : '商品简介'
				}, {
					field : 'price',
					title : '商品价格'
				}, {
					field : 'cover',
					title : '商品图片',
					templet : "#imgtmp"
				}, {
					field : 'stock',
					title : '商品库存'
				}, {
					field : 'onSale',
					title : '在售状态' ,
					templet : '#newOnSale'
				}, {
					field : 'pid',
					title : '操作',
					toolbar : '#操作列模板',
					width : 150,
				} ] ]
			});

			// 处理搜索
			form.on('submit(LAY-app-contcomm-search)', function(data) {
				var field = data.field;
				if (field.pid.trim() == '' && field.title.trim() == ''
						&& field.onSale.trim() == '') {
					layer.msg('请至少填写一个条件');
					table.reload('LAY-app-content-list',{
						where:field,
						page:1
					})
					return false;
				}
				//执行重载
				table.reload('LAY-app-content-list', {
					where : field,
					page : 1
				});

				return false;
			});
			
			form.on('switch(onSale)', function(obj){
				var pid = this.value;
				var onSale = obj.elem.checked;
				$.ajax({
					url:"/product/onsale",
					type:"post",
					data:{
						pid:pid,
						onSale:onSale
					},
					dataType:'json',
					success: function(result){
						layer.msg('操作成功');
					}
				});
			  });
			
			table.on('tool(LAY-app-content-list)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
				if (layEvent == 'del') { //删除
					layer.confirm('真的删除行么', function(index) {

						//向服务端发送删除指令
						obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
						layer.close(index);
						layui.$.ajax({
							url : "/product/del",
							type : "get",
							data : {
								pid : data.pid
							},
							dataType : "json",
							success : function(res) {
								if (res.code == 0) {
									layer.msg('删除成功')
									table.reload('LAY-app-content-list')
								}
							}
						})
					});
				} else if (layEvent == 'edit') { //编辑
					//do something

					layer.open({
						type : 2,
						title : '更改商品信息',
						content : '/product/edit?pid=' + data.pid,
						maxmin : true,
						area : [ '550px', '550px' ],
						end : function() {

							table.reload('LAY-app-content-list')
						}
					});
				}
			});
			table.on('toolbar(LAY-app-content-list)', function(obj){
				  var checkStatus = table.checkStatus(obj.config.id);
				  var pids = checkStatus.data;
				  
				  switch(obj.event){
				    case 'add':
				    	add();
				    break;
				    case 'delete':
				    	batchDel(pids);
				    break;
				    case 'update':
				      layer.msg('编辑');
				    break;
				  };
				});
			
			function add() {
				
				layer.open({
					type : 2,
					title : '添加商品',
					content : '/product/add',
					maxmin : true,
					area : [ '550px', '550px' ],
					end : function() {
						console.log('已重载')
						table.reload('LAY-app-content-list')
					}
				});
			}
			function batchDel(pids){
				layer.confirm('确定删除吗？', function(){
					console.log(pids);

					 layui.$.ajax({
						 url:"/batch/del",
						 type:"post",
						 dataType:"json",
						 data:{
							 pid:pids.map(c => c.pid)
								 },
						 success:function(){
							 table.reload('LAY-app-content-list');
							 layer.msg('已删除');
						 }
					 })
				});
			}

			$('.layui-btn.layuiadmin-btn-list').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

		});
	</script>

	<script type="text/html" id="imgtmp">
		<img src="{{d.cover}}">
	</script>
	<style type="text/css">
.layui-table-cell {
	height: auto !important;
}
</style>
</body>
</html>
